<template>
    <div class="BaseHeader">
        <div class="module-container">
            <span class="title">国家智能化城市安全管理平台</span>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/home'}" class="color0" :class="{'active':currentRoute==='home' || currentRouteMoudle == 'home'}"><div class="item-div"><a class="img0 img1"/>首页</div></router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/sourceControl'}" class="color0" :class="{'active':currentRoute==='sourceControl' || currentRouteMoudle == 'sourceControl'}"><div class="item-div"><a class="img0 img2"/>源头控制</div></router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/processMonitoring'}" class="color0" :class="{'active':currentRoute==='processMonitoring' || currentRouteMoudle == 'processMonitoring'}"><div class="item-div"><a class="img0 img3"/>过程监控</div></router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/earlyWarning'}" class="color0" :class="{'active':currentRoute==='earlyWarning' || currentRouteMoudle == 'earlyWarning'}"><div class="item-div"><a class="img0 img4"/>预警预报</div></router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/emergencyResponse'}" class="color0" :class="{'active':currentRoute==='emergencyResponse' || currentRouteMoudle == 'emergencyResponse'}"><div class="item-div"><a class="img0 img5"/>应急处置</div></router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/composite'}" class="color0" :class="{'active':currentRoute==='composite' || currentRouteMoudle == 'composite'}"><div class="item-div"><a class="img0 img6"/>综合治理</div></router-link>
            </div>
            <div class="user-information">
                <a class="user-image"/>
                <span class="user-name">管理员</span>
                <div class="user-tools">
                    <a title="锁定" class="user-tool-image user-lock"/>
                    <a title="帮助" class="user-tool-image user-help"/>
                    <a title="退出" class="user-tool-image user-exit"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BaseHeader",
        data(){
            return{
                currentRoute:'home',
                currentRouteMoudle: 'portal-web',
            }
        },
        methods: {
            //通过路径获取当前模块
            getMoudleByPath(path){
                console.log('来到baseheader的path', path);
                if(path){
                    let paths = path.split('/');
                    if(paths && paths.length > 1){
                        this.currentRouteMoudle = paths[paths.length - 2];
                    }
                }
            }
        },
        watch:{
            '$route':{
                handler(to){
                    this.currentRoute = to.name
                    this.getMoudleByPath(to.path);
                },
                deep:true,
            }
        }
    }
</script>

<style scoped lang="less">
    .BaseHeader{
        width: 100%;
        height: .06rem;
        position: absolute;
        top: 0;
        font-size: @fontSize_h1;
        background: url('../../assets/images/foot/header_image.png') no-repeat center;
        background-size: cover;
        .module-container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            margin: 0 auto;
            .title{
                height:100%;
                color: #ffffff;
                line-height: .06rem;
                display: block;
                font-size: 30px;
                padding-left: .05rem;
                margin-right: 0.1rem;
                letter-spacing: 0.003rem;
                font-weight: bold;
                font-family: serif;
            }
            .module-item{
                width: .15rem;
                height:100%;
                position: relative;
                .item-div{
                    text-align: center;
                    .img0{
                        width: .03rem;
                        height: .03rem;
                        margin-bottom: .003rem;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    .img1{
                        background: url('../../assets/images/foot/首页.png') no-repeat center;
                    }
                    .img2{
                        background: url('../../assets/images/foot/源头管控.png') no-repeat center;
                    }
                    .img3{
                        background: url('../../assets/images/foot/过程监控.png') no-repeat center;
                    }
                    .img4{
                        background: url('../../assets/images/foot/预警预报.png') no-repeat center;
                    }
                    .img5{
                        background: url('../../assets/images/foot/应急处置.png') no-repeat center;
                    }
                    .img6{
                        background: url('../../assets/images/foot/综合治理.png') no-repeat center;
                    }
                }
                .color0{
                    width: .15rem;
                    height:100%;
                    color: #ffffff;
                    line-height: .06rem;
                    display: block;
                }
                .active {
                    background: rgba(0,0,0,0.1);
                }
            }
            .module-item:hover{
                background: rgba(0,0,0,0.1);
                opacity: 0.5;
            }
            .user-information{
                position: absolute;
                right: 0;
                height: .06rem;
                text-align: center;
                line-height: .06rem;
                .user-image{
                    float: left;
                    width: .04rem;
                    height: .04rem;
                    margin-top: .01rem;
                    display: inline-block;
                    vertical-align: middle;
                    border-radius: 50%;
                    background: url('../../assets/images/foot/用户头像.png') no-repeat center;
                }
                .user-name{
                    float: left;
                    margin: auto .01rem;
                }
                .user-tools{
                    float: left;
                    margin-left: .03rem;
                    margin-right: .015rem;
                    .user-tool-image{
                        width: .04rem;
                        height: .04rem;
                        display: inline-block;
                        vertical-align: middle;
                        cursor:pointer;
                    }
                    .user-tool-image:hover{
                        opacity: 0.5;
                    }
                    .user-lock{
                        background: url('../../assets/images/foot/lock.png') no-repeat center;
                    }
                    .user-help{
                        background: url('../../assets/images/foot/help.png') no-repeat center;
                    }
                    .user-exit{
                        background: url('../../assets/images/foot/exit.png') no-repeat center;
                    }
                }
            }
        }
    }
</style>